<template>
	<view class="" style="overflow: hidden;">
		<view class="screen">
			<view class="screen_one">
				<view class="screen_name">类型</view>
				<view class="screen_con">
					<view
						:class="['screen_condition', type_index == index ? 'screen_condition_type' : '']"
						v-for="(item, index) in type"
						:key="index"
						@click="choosetype(item, index)"
					>
						{{ item.type }}
					</view>
				</view>
			</view>
			<view class="screen_one">
				<view class="screen_name"><span>状态</span></view>
				<view class="screen_con">
					<view
						:class="['screen_condition  screen_condi', state_index == index ? 'screen_condition_state' : '']"
						v-for="(item, index) in state"
						:key="index"
						@click="choosestate(item, index)"
					>
						{{ item.type }}
					</view>
				</view>
			</view>
			<view class="screen_one">
				<view class="screen_name"><span>费用</span></view>
				<view class="screen_con">
					<view
						:class="['screen_condition', money_index == index ? 'screen_condition_money' : '']"
						v-for="(item, index) in type"
						:key="index"
						@click="choosemoney(item, index)"
					>
						{{ item.type }}
					</view>
				</view>
			</view>
			<view class="screen_one">
				<view class="screen_name"><span>区域</span></view>
				<view class="screen_con">
					<view
						:class="['screen_condition', area_index == index ? 'screen_condition_area' : '']"
						v-for="(item, index) in type"
						:key="index"
						@click="choosearea(item, index)"
					>
						{{ item.type }}
					</view>
				</view>
			</view>
		</view>
		<view class="screen_btn">
			<view class="screen_reset" @click="toreset">重置</view>
			<view class="screen_true" @tap="toscreenresult">确定</view>
		</view>
		<navigation></navigation>
	</view>
</template>

<script>
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: {
		navigation
	},
	data() {
		return {
			// 类型下标
			type_index: 5,
			state_index: 5,
			money_index: 5,
			area_index: 5,
			value: { typevalue: '', statevalue: '', moneyvalue: '', areavalue: '' },
			type: [{ type: '赛事' }, { type: '活动' }, { type: '任务' }],
			state: [{ type: '报名未开始' }, { type: '报名进行中' }],
			money: [{ type: '收费' }, { type: '免费' }],
			area: [{ type: '全国' }, { type: '本省' }, { type: '同城' }]
		};
	},
	methods: {
		choosetype(item, key) {
			this.type_index = key;
			this.value.typevalue = item.type;
			 // console.log (this.value.typevalue);
		},
		choosestate(item, key) {
			this.state_index = key;
			this.value.statevalue = item.type;
		},
		choosemoney(item, key) {
			this.money_index = key;
			this.value.moneyvalue = item.type;
		},
		choosearea(item, key) {
			this.area_index = key;
			this.value.statevalue = item.type;
		},
		// 重置
		toreset() {
			this.type_index = 5;
			this.state_index = 5;
			this.money_index = 5;
			this.area_index = 5;
			this.value = {};
			 // console.log (this.value.typevalue);
		},
		toscreenresult() {
			uni.navigateTo({
				url: '/pageA/screen/screenresult'
			});
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../static/less/pageA/screen/screen.less');
</style>
